<template>
	<view class="ys">
		<y-header></y-header>
		<view class="userbody">
			<y-bread :name="pageName"></y-bread>
			<view class="usermain">
				<view class="left">
					<y-usermenu></y-usermenu>
				</view>
				<view class="right">
					<view class="orderlist-title">
						<text>{{$t('index.ddlb')}}</text>
						<view class="select">
							<uni-data-select v-model="ordertype" :localdata="orderRange"
								@change="changeType"></uni-data-select>
						</view>
					</view>
					<view class="orderlist">
						<view class="orderitem" v-for="(item,index) in orderList" :key="index">
							<view class="order-info">
								<view class="item-pay">
									<view class="pay-left">
										<image src="/static/icon/icon-delivery.svg" mode=""></image>
										<text>{{item.delivery_type.text}}</text>
										<view class="pc">
											<text class="line"></text>
											<image src="/static/icon/icon_atm.svg" mode=""></image>
											<text>{{item.pay_type.text}}</text>
										</view>
									</view>
									<view class="pay-right pc">
										{{$t('index.gmrq')}}：{{item.pay_time}}
									</view>
								</view>
								<view class="item-no">
									{{$t('index.gwcbh')}}：{{item.order_no}}
								</view>
								<view class="item-num">
									{{$t('index.ddze')}}：<text>${{item.pay_amount}}</text>（{{$t('index.hyf')}}）
								</view>
								<view class="item-cz">
									<view v-if="item.pay_status.value == 10" @click="cancleOrder(item)">
										{{$t('index.qxdd')}}</view>
									<view v-else>
										<view class="" v-if="item.order_type == 2">
											{{item.start_time}}~{{item.end_time}}
										</view>
									</view>
									<view @click="toPage('/pages/user/orderdetail?id='+item.id)">
										{{$t('index.ckmx')}}<uni-icons type="right" color="#428bca"
											:size="15"></uni-icons>
									</view>
								</view>
								<!-- <view class="item-type">
									<text>余额支付</text>
								</view> -->
							</view>
							<view class="order-goods" v-show="item.showgoods">
								<!-- <view class="goods-type">
									<text>待付款</text>
								</view> -->
								<view class="goodsinfo" @click="toPage('/pages/shop/detail?id='+item.id)"
									v-for="(gitem,gindex) in item.goods" :key="gindex">
									<view class="imgbox">
										<image :src="gitem.goods_info.cover_path" mode="widthFix"></image>
									</view>
									<view class="goodsname">
										<view class="name">
											{{gitem.goods_info.name}}
										</view>
										<view class="goodsprice">
											${{gitem.total_price}}
										</view>
										<!-- <view class="goods-status">
											待支付
										</view> -->
									</view>
								</view>
							</view>
							<view class="order-btn" @click="showMore(item)">
								{{item.goods_count}} {{$t('index.xsp')}}
								<uni-icons v-show="item.showgoods" color="#333" type="up" :size="16"></uni-icons>
								<uni-icons v-show="!item.showgoods" color="#333" type="down" :size="16"></uni-icons>
							</view>
						</view>
					</view>
					<view class="more" v-if="orderList.length > 0">
						<text v-if="page < last_page" @click="getMore">{{$t('index.xsgjjl')}}</text>
						<text v-else>{{$t('index.nomore')}}</text>
					</view>
					<view class="no_list" v-else>
						- {{$t('index.zwdd')}} -
					</view>
				</view>
			</view>
			<y-model :modelMsg="modelMsg" :showModel="showModel" @getModel="getModel"></y-model>
		</view>
	</view>
</template>

<script>
	import {
		OrderList
	} from "@/api/user.js"
	export default {
		data() {
			return {
				pageName: this.$t('index.ddcx'),
				orderList: [],
				modelMsg: this.$t('index.qrqx'),
				showModel: false,
				page: 1,
				last_page: 1,
				ordertype: '',
				orderRange: [{
						value: 'payment',
						text: this.$t('index.dfk')
					},
					{
						value: 'delivery',
						text: this.$t('index.dfh')
					},
					{
						value: 'received',
						text: this.$t('index.dsh')
					}
				],
			}
		},
		onLoad() {
			this.OrderList()
		},
		methods: {
			changeType(e) {
				this.page = 1
				this.orderList = []
				this.OrderList()
			},
			getMore() {
				if (this.page < this.last_page) {
					this.page++
					this.OrderList()
				}
			},
			OrderList() {
				OrderList({
					page: this.page,
					type: this.ordertype
				}).then(res => {
					if (res.data.data.length > 0) {
						res.data.data.forEach(item => {
							item.showgoods = false
						})
					}
					this.orderList = this.orderList.concat(res.data.data)
					this.last_page = res.data.last_page
				})
			},
			getModel(e) {
				this.showModel = false
				if (e) {
					uni.$showMsg(this.$t('index.czcg'))
				}
			},
			cancleOrder(item) {
				this.showModel = true
			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			showMore(item) {
				item.showgoods = !item.showgoods
			}
		}
	}
</script>

<style lang="scss">
	.userbody {
		max-width: 1180px;
		margin: 0 auto;
		margin-top: 20px;
		padding: 10px;
		box-sizing: border-box;
	}

	.more {
		text-align: center;
		font-size: 14px;
		color: #428bca;
		margin-top: 20px;

		text {
			cursor: pointer;
		}
	}

	.usermain {
		display: flex;
		justify-content: space-between;

		.left {
			box-sizing: border-box;
			width: 25%;
			max-width: 265px;
			margin-top: 20px;
			margin-bottom: 20px;
		}

		.right {
			box-sizing: border-box;
			width: 75%;
			padding-right: 1%;
			margin-top: 20px;
			margin-bottom: 20px;

			.orderlist {
				margin-top: 15px;
			}

			.orderlist-title {
				font-size: 22px;
				border-left: 3px solid #4a4e5c;
				padding-left: 7px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.orderitem {
				background: #ffffff;
				border: 1px solid #d8d8d8;
				border-radius: 5px;
				padding-top: 20px;
				margin-bottom: 15px;
				font-family: PingFang-TC;

				.order-info {
					.item-pay {
						padding: 0px 15px;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 15px;

						.pay-left {
							display: flex;
							align-items: center;
							font-size: 14px;

							.line {
								background: #d8d8d8;
								width: 1px;
								height: 15px;
								margin: 0 15px;
							}

							image {
								margin-right: 6px;
								height: 20px;
								width: 20px;
							}
						}

						.pay-right {
							color: #999999;
							font-size: 15px;
							font-family: "PingFang TC";
						}
					}

					.item-no {
						display: flex;
						margin-bottom: 8px;
						font-size: 15px;
						font-family: PingFang-TC;
						line-height: 16px;
						font-weight: 400;
						color: #000000;
						flex-wrap: wrap;
						padding: 0px 15px;
						align-items: center;
					}

					.item-num {
						display: flex;
						margin-bottom: 15px;
						font-size: 15px;
						font-family: PingFang-TC;
						line-height: 16px;
						font-weight: 400;
						color: #000000;
						flex-wrap: wrap;
						padding: 0px 15px;
						align-items: center;

						text {
							color: #ff5353;
						}
					}

					.item-cz {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 5px 0px;
						padding: 0px 15px 6px;
						color: #428bca;
						font-size: 15px;
						flex-wrap: wrap;

						view {
							cursor: pointer;
						}
					}

					.item-type {
						padding: 0px 15px;
						margin: 5px 0;

						text {
							border-radius: 4.5px;
							font-size: 14px;
							text-align: center;
							box-sizing: border-box;
							display: inline-block;
							background-color: #ffffff;
							cursor: pointer;
							border: 1px solid #999999;
							width: 131px;
							height: 30px;
							line-height: 28px;
							color: #999999;
						}
					}


				}

				.order-goods {
					border-top: 1px solid #dddddd;

					.goods-type {
						padding: 5px 15px;
						background-color: rgb(243, 250, 255);
						display: flex;
						justify-content: flex-start;
						align-items: center;
						box-sizing: border-box;
						font-size: 14px;
						height: 37px;
					}
				}



				.goodsinfo {
					padding: 16px 15px;
					display: flex;
					margin-bottom: 10px;

					.imgbox {
						width: 100px;
						height: 100px;
						margin-right: 15px;
						display: block;

						image {
							width: 100%;
						}
					}

					.goodsname {
						width: calc(100% - 115px);

						.name {
							font-size: 15px;
							line-height: 18px;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
							overflow: hidden;
							min-height: 18px;
							margin-bottom: 4px;
						}

						.goodsprice {
							margin-top: 4px;
							line-height: 20px;
							font-size: 15px;
							color: #ff5353;
						}

						.goods-status {
							margin: 10px 0px;
							display: flex;
							font-size: 15px;
							flex-direction: column;
						}
					}
				}






				.order-btn {
					height: 60px;
					display: flex;
					border-top: 1px solid #dddddd;
					justify-content: center;
					align-items: center;
					cursor: pointer;
					text-align: center;
					font-size: 15px;
					font-weight: 400;
					color: #333;

					text {
						margin-left: 5px;
					}
				}
			}
		}
	}

	@media (max-width:768px) {
		.usermain {
			.left {
				display: none;
			}

			.right {
				width: 100%;
				padding: 0;

				.orderitem .goodsinfo {
					.imgbox {
						width: 80px;
						height: 80px;
					}

					.goodsname {
						.name {
							-webkit-line-clamp: 2;
						}

						.goods-status {
							font-size: 12px;
							margin: 5px 0;
						}
					}
				}

			}
		}

		.pc {
			display: none;
		}
	}
</style>